<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 基础表格
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>




		<div class="container">

			<div class="handle-box">
				<el-button type="primary" icon="el-icon-delete" class="handle-del mr10"
					@click="delAllSelection">批量删除</el-button>
				<!-- <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
					<el-option key="1" label="广东省" value="广东省"></el-option>
					<el-option key="2" label="湖南省" value="湖南省"></el-option>
				</el-select> -->
				<el-input v-model="query.address" placeholder="地址" class="handle-input mr10"></el-input>
				<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
			</div>

			<!--  数据显示区域 -->
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange">
				<!-- prop属性：变量名，尽量和后端传递的参数名一致 -->
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="用户名"></el-table-column>
				<el-table-column prop="phone" label="手机号"> </el-table-column>
				<el-table-column prop="password" label="密码" align="center"></el-table-column>
				<el-table-column prop="address" label="地址"></el-table-column>
				<el-table-column prop="storeid" label="商户" align="center">
				</el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit"
							@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-edit" @click="handleAdd">新增</el-button>

						<el-button type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>


			<!--  分页控件：
			  current-page:当前页数  ----传递给后端
			  page-size:页面大小----传递给后端
			  total：数据总条数 -----后端传递
			 -->
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next,sizes" :current-page="query.pageIndex"
					:page-size="query.pageSize"  :page-sizes="[5, 10, 15, 20]"  :total="pageTotal"   @size-change="handleSizeChange" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="title" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="form.password"></el-input>
				</el-form-item>
				<el-form-item label="商户">
					<el-input v-model="form.storeid"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'basetable',
		data() {
			return {
				title: "",
				query: {
					pageIndex: 1,
					pageSize: 10,
					address:'',
					name:''
				},
				tableData: [],
				//多选框的值
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
				idx: -1,
				id: -1
			};
		},
		//创建时就调用
		created() {
			//this.getData();
			this.getPageData()
		},
		methods: {
			//加载数据
			getData() {
				this.$http.get("/findAll").then((res) => {
					//res：发送请求得到的响应
					console.log(res)
					//给tableData赋值
					this.tableData = res.data
				})
			},
			// 触发搜索按钮
			handleSearch() {
				//在搜索之前让他回到第一页,解决在其他页搜索失败的问题
				this.query.pageIndex=1
				//将用户输入的数据传递到后端
				console.log(this.query)
				this.getPageData()
			},
			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					console.log(row)
					//得到id 发送delete请求到后端完成删除
					let id = row.id
					this.$http.delete("/remove?id=" + id).then((res) => {
						if (res.data.success) {
							this.$message({
								message: res.data.message,
								type: 'success'
							});
						} else {
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
						//重新加载数据
						this.getPageData()
					})
				})



			},
			// 多选操作
			handleSelectionChange(val) {
				console.log(val)
				//选中多少 就得到多少行的数据的集合
				this.multipleSelection = val;
				
			},
			delAllSelection() {
				//将id取出封装为数组传入后端
				let ids=this.multipleSelection.map(item=>item.id)
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$http.patch("/batchDelete",ids).then((res) => {
						if (res.data.success) {
							this.$message({
								message: res.data.message,
								type: 'success'
							});
						} else {
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
						//重新加载数据
						this.getPageData()
					})
				})
				console.log(ids)
			},
			//新增操作
			handleAdd() {
				//清空当前行数据
				this.form = {};
				this.title = "新增"
				//控制弹框是否弹出
				this.editVisible = true;
			},

			// 编辑操作
			handleEdit(index, row) {
				this.title = "编辑"
				console.log(index, row)
				//数据回显
				this.idx = index;
				this.form = row;
				//控制弹框是否弹出
				this.editVisible = true;
			},
			// 保存编辑
			saveEdit() {
				this.$http.post("/saveOrUpdate", this.form).then((res) => {
					console.log(res)
					if (res.data.success) {
						this.$message({
							message: res.data.message,
							type: 'success'
						});
					} else {
						this.$message({
							message: res.data.message,
							type: 'error'
						});
					}
					//重新加载数据
					this.getPageData()
				})
				//关闭弹框
				this.editVisible = false;

			},
			//分页查询数据
			getPageData(){
				console.log(this.query)
				//发送请求
				this.$http.post("/listPage",this.query).then((res=>{
					console.log(res)
					//数据赋予
					this.tableData = res.data.records
					//给total赋值
					this.pageTotal=res.data.total
					//给下拉框赋值
					this.query.address
				}))
			},
			
			// 分页导航
			handlePageChange(val) {
				//val 页码
				console.log(val)
				//将当前页码改变 重新赋值
				this.query.pageIndex=val
				this.getPageData()
			
			},
			handleSizeChange(val){
				//val 页面大小
				console.log(val)
				this.query.pageSize=val
				this.getPageData()
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>